import React, { createContext, useContext, useState, useEffect } from 'react';
import { View } from 'react-native';

// 创建一个上下文
const PortalContext = createContext(null);

// Portal组件定义
const Portal = ({ children }) => {
  const [container, setContainer] = useState(null);

  // 创建一个新的View作为门户容器
  const createPortalContainer = () => {
    setContainer(<View key="portal-container" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 }}>{children}</View>);
  };

  useEffect(() => {
    createPortalContainer();
    // 可以在此处添加一个全局事件监听器，当需要隐藏/显示时调用相关方法
    return () => {
      // 组件卸载时清理资源
    };
  }, []);

  // 将所有子元素挂载到门户容器中
  useEffect(() => {
    if (container) {
      // 这里只是简单地在容器中添加子元素，实际项目中可能需要更复杂的逻辑
      setContainer(prevContainer => <View key="portal-container" style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999 }}>{children}</View>);
    }
  }, [children]);

  return container ? (
    <PortalContext.Provider value={container}>
      {container}
    </PortalContext.Provider>
  ) : null;
};

// 使用Portal的子组件
const Content = () => {
  const container = useContext(PortalContext);

  if (!container) {
    return null;
  }

  // 直接在Portal组件下渲染子组件
  return container;
};

export default Portal;